<template>
  <div>
    <el-container>
      <el-header class="header">
        <el-row :gutter="20" style="width: 1200px; margin: 0 auto;">
          <el-col :span="4">
            <div class="logo-box" @click="$router.push('/mainPage')">
              <img src="../../static/logo.jpg" alt="">
              <span class="logo-name">BestProperty</span>
            </div>
          </el-col>
          <el-col :span="16" >
            <el-menu :default-active="activeIndex" class="el-menu-demo menu" mode="horizontal">
              <!--<el-menu-item index="0" @click="$router.push('/mainPage')">Home</el-menu-item>-->
              <el-menu-item index="1" @click="$router.push('/buy')">{{$t('m.Buy')}}</el-menu-item>
              <el-menu-item index="2" @click="$router.push('/newDevelopment')">{{$t('m.NewDevelopment')}}</el-menu-item>
              <el-menu-item index="3"  @click="$router.push('/rent')">{{$t('m.Rent')}}</el-menu-item>
              <el-menu-item index="4" @click="$router.push('/hostel')">{{$t('m.Hostel')}}</el-menu-item>
              <el-menu-item index="5" @click="$router.push('/download')">{{$t('m.DownloadApp')}}</el-menu-item>
              <el-submenu index="6">
                <template slot="title">{{$t('m.Advertise')}}</template>
                <el-menu-item index="6-1"><a href="http://ads.bestproperty.com.mm/index.html" target="_blank">{{$t('m.MyAds')}}</a>
                </el-menu-item>
                <!--<el-menu-item index="6-2"><a href="http://ads.bestproperty.com.mm/index.html" target="_blank">{{$t('m.Developer')}}</a></el-menu-item>-->
                <!--<el-menu-item index="6-3">{{$t('m.Owneravailablesoon')}}</el-menu-item>-->
                <el-menu-item index="6-4">{{$t('m.HostelLandlordmobileapponly')}})</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
          <el-col :span="3">
            <div class="lang-box">
              <!--<el-dropdown class="el-menu-demo drop-down">-->
                <!--<span class="el-dropdown-link">{{$t('m.Select')}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>-->
                <!--<el-dropdown-menu slot="dropdown">-->
                  <!--<el-dropdown-item @click.native="signOut" style="min-width: 100px;text-align: center;">-->
                    <!--{{$t('m.Logout')}}-->
                  <!--</el-dropdown-item>-->
                <!--</el-dropdown-menu>-->
              <!--</el-dropdown>-->
              <span class="lang" @click="changeLang">{{lang}}</span>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <div class="line-header"></div>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'Main',
    data() {
      return {
        activeIndex: '',
        lang:'English',
        routerArr:[{
          path: '/mainPage',
          activeIndex: '0'
        },{
          path: '/buy',
          activeIndex: '1'
        },{
          path: '/newDevelopment',
          activeIndex: '2'
        },{
          path: '/rent',
          activeIndex: '3'
        },{
          path: '/hostel',
          activeIndex: '4'
        },{
          path: '/download',
          activeIndex: '5'
        },{
          path: '/Advertise',
          activeIndex: '6'
        },]
      }
    },
    methods: {
      getActiveRoute(){
        for(var i=0;i<this.routerArr.length;i++){
          if(this.routerArr[i].path == this.$route.path){
            this.activeIndex = this.routerArr[i].activeIndex
          }
        }
      },
      // 切换语言
      changeLang () {
        if(this.$i18n.locale == 'MM'){
          this.$i18n.locale = 'US'
          this.lang = 'ျမန္မာ'
          this.$store.commit('updateLang', 'US')
          localStorage.setItem('lang','US')

        }else if(this.$i18n.locale == 'US'){
          this.$i18n.locale = 'MM'
          this.lang='English'
          this.$store.commit('updateLang', 'MM')
          localStorage.setItem('lang','MM')
        }
      }
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      "$route": "getActiveRoute"
    },
    mounted() {
        this.getActiveRoute()
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .el-menu--horizontal .el-menu-item a{
    text-decoration: none!important;
  }
</style>
<style scoped>
  .main {
    padding: 0;
  }

  .header {
    height: 60px !important;
    font-size: 16px;
  }

  .logo-box {
    color: #f60;
    height: 60px;
    cursor: pointer;
    line-height: 60px;
  }

  .logo-name {
    margin-left: 10px;
    vertical-align: middle;
    font-size: 18px;
  }


  .logo-box img {
    vertical-align: middle;
    width: 30px;
    height: 30px;
  }

  .lang-box {
    height: 100%;
    overflow: hidden;
    padding-right: 20px;
    line-height: 60px;
  }

  .lang{
    float: right;
    margin-right: 20px;
    color:#909399;
    cursor: pointer;
  }

  .drop-down {
    float: right;
    font-size: 16px!important;
    color:#909399;
  }

  .menu {
    padding-top: 6px;
    font-size: 16px;
  }

  .line-header {
    height: 1px;
    background: #eeeeee;
    /*margin-top: -2px;*/
  }

</style>
